<template>
  <div>
	<div class="position-container" v-loading="positionBoxLoading">
		<div class="position-container-lt" v-loading="positionLoading">
			<h3>职位列表</h3>
			<p :class="['add-position',{'add-position-active':!isEditPositionFlag&&setPositionFlag}]" @click="editPositionFn(false)">
				<i class="el-icon-circle-plus-outline"></i>
				添加新职位
			</p>
			<el-input v-model="filterPosition" placeholder="请输入关键字筛选" size="normal" clearable style="margin:10px 0;"></el-input>
			<ul class="position-list position-scorll" v-if="positionListShow.length !== 0">
				<li class="position-item" v-for="i in positionListShow" :key="i.id">
					<p :class="['position-name',{'position-name-active':choosePosition.id === i.id&&isEditPositionFlag}]" @click="editPositionFn(true,i)">{{i.name}}</p>
					<i class="el-icon-delete" @click="deletePositionFn(i.id)"></i>
				</li>
			</ul>
			<p v-else style="text-align:center;">职位列表为空~</p>
			<el-pagination
				layout="prev, pager, next"
				:page-size="positionPageSize"
				hide-on-single-page
				class="sn-pagination"
				background
				:current-page.sync="positionPageIndex"
				@current-change="positionPageChange"
				:total="positionTotal">
			</el-pagination>
		</div>
		<div class="position-container-rt" v-loading="savePositionLoading">
			<div v-if="setPositionFlag">
				<h3>职位名称</h3>
				<el-input v-model="choosePosition.name" placeholder="请输入职位名称" size="normal" clearable maxlength="10" show-word-limit></el-input>
				<h3>职位权限</h3>
				<div class="position-scorll" style="margin-top: 10px;" v-if="positionMenus.length!=0">
					<p  v-for="item in positionMenus" :key="item.id" style="margin-top:0;">	
						<el-checkbox v-model="item.isCheck">{{item.name}}
						</el-checkbox>
					</p>
				</div>
				<p class="position-btngroup" style="margin-top:20px;"> 
					<el-button type="primary" size="default" @click="savePositionFn">保存</el-button>
					<el-button type="primary" size="default" v-if="isEditPositionFlag" @click="deletePositionFn(choosePosition.id)">删除</el-button>
				</p>
			</div>
			<p v-else style="text-align:center;margin-top:100px;">点击左侧列表，进行操作</p>
		</div>
	</div>
  </div>
</template>

<script>
import {GetJobPositionsByPage,GetEnterpriseFunctionList,DeleteJobPosition,UpdateJobPosition,AddJobPosition} from '@/api/enterprise'
export default {
	data(){
		return {
			activeName:'purchase',
			//设置职位变量
			positionDialog:false,
			positionBoxLoading:false,
			positionLoading:false,
			savePositionLoading:false,
			positionSkeleton:false,
			choosePosition:{},
			positionList:[],
			positionMenus:[],
			positionPageSize:4,
			positionPageIndex:1,
			setPositionFlag:false,
			isEditPositionFlag:false,
			filterPosition:'',
			positionTotal:0,
		}
	},
	props:{
		enterpriseId:{
			default:'',
			type:String
		},
	},
	computed:{
		positionListShow(){
			return this.positionList.filter(item=>{
				if(this.filterPosition === ''){
					return item;
				}else{
					return item.name.indexOf(this.filterPosition) !== -1;
				}
			})
		},
	},
	created(){
		this.setPositionFn();
	},
	methods:{
		//职位列表 page 改变触发事件
		positionPageChange(val){
			this.positionPageIndex = val;
			this.positionListInit()
		},
		//职位设置dialog打开时获取职位列表和权限列表
		async setPositionFn(){
			this.positionSkeleton = true;
			let [res,res2] = await Promise.all([ GetJobPositionsByPage({pageIndex:this.positionPageIndex,pageSize:this.positionPageSize,EnterpriseId:this.enterpriseId}),
			GetEnterpriseFunctionList({id:this.enterpriseId})])
			if(res.code === 200&&res2.code === 200){
				this.positionSkeleton = false;
				if(res.data!==null){
					this.positionList = res.data.list;
					this.positionTotal = res.data.totalCount;
				}
				if(res2.data!==null){
					let ary = [];
					 res2.data.forEach(item=>{
						if(item.isOpen){
							ary.push({
								id:item.id,
								name:item.name,
								description:item.description,
								isCheck:false
							})
						}
					});
					this.positionMenus =ary;
				}
			}else{
				if(res.code !== 200){
					this.$message.error('获取店铺职位列表失败，错误信息：'+res.erroMessage)
				}
				if(res2.code !== 200){
					this.$message.error('获取店铺权限列表失败，错误信息：'+res.erroMessage)
				}
			}
		},
		//点击左侧列表，设置右侧显示内容
		editPositionFn(flag,data){
			this.setPositionFlag = true;
			this.isEditPositionFlag = flag;
			if(flag){
				this.choosePosition = data;
				let that = this;
				this.positionMenus.forEach(item=>{
					item.isCheck = false;
				});
				data.functions.forEach(item =>{
					that.positionMenus.forEach(data=>{
						if(item.appFunctionId === data.id){
							data.isCheck = true;
						}
					})
				})
			}else{
				this.choosePosition = {};
				this.positionMenus.forEach(item=>{
					item.isCheck = false;
				})
				console.log(this.positionMenus);
			}
		},
		//左侧职位列表重置
		async positionListInit(){
			this.positionLoading = true;
			const res = await GetJobPositionsByPage({pageIndex:this.positionPageIndex,pageSize:this.positionPageSize,EnterpriseId:this.enterpriseId});
			if(res.code === 200){
				this.positionLoading = false;
				if(res.data!==null){
					this.positionList = res.data.list;
				}
			}else{
				this.positionLoading = false;
				this.$message.error('获取店铺列表失败，错误信息：'+res.erroMessage);
			}

		},
		//修改或新增职位信息
		async savePositionFn(){
			this.savePositionLoading = true;
			if(!this.choosePosition.name){
				this.savePositionLoading = false;
				this.$message.warning('职位名称不得为空');
				return false;
			}
			let ary = this.positionMenus.filter(item=>item.isCheck === true);
			if(ary.length === 0){
				this.savePositionLoading = false;
				this.$message.warning('职位权限不得为空');
				return false;
			}
			
			if(this.isEditPositionFlag){
				console.log(1);
				let params = {
					name:this.choosePosition.name,
					enterpriseId:this.enterpriseId,
					id:this.choosePosition.id,
					functions:ary.map(item=> {return {appFunctionId:item.id}})
				}
				const res = await UpdateJobPosition(params);
				if(res.code === 200){
					this.savePositionLoading = false;
					this.$message.success('修改职位信息成功');
					this.positionListInit();
				}else{
					this.savePositionLoading = false;
					this.$message.error('修改职位信息失败，错误信息：'+res.erroMessage);
				}
			}else{
				console.log(2);
				let params = {
					name:this.choosePosition.name,
					enterpriseId:this.enterpriseId,
					functions:ary.map(item=> {return {appFunctionId:item.id}})
				}
				const res = await AddJobPosition(params);
				if(res.code === 200){
					this.savePositionLoading = false;
					this.$message.success('新增职位信息成功');
					this.positionListInit();
				}else{
					this.savePositionLoading = false;
					this.$message.error('新增职位失败，错误信息：'+res.erroMessage);
				}
			}
		},
		//删除职位
		deletePositionFn(id){
			this.$confirm('此操作将删除该职位?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				this.positionBoxLoading = true;
				let params = {
					"id": id,
					thoroughly:true
				}
				let res = await DeleteJobPosition(params);
				if(res.code === 200){
					this.$message({
						type: 'success',
						message: '删除职位成功!',
                  		showClose:true
					});
					this.positionBoxLoading = false;
					this.positionListInit();
					this.setPositionFlag = false;
					if(id === this.choosePosition.id){
						this.choosePosition  = {};
					}
				}else{
					this.$message({
						type: 'error',
						message: '删除职位失败，错误信息：'+res.erroMessage,
                  		showClose:true
					});
					this.positionBoxLoading = false;
				}
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消操作',
                  		showClose:true
				});          
			});
		},
	},
}
</script>

<style lang="scss" >
	@import '~@/styles/mixin.scss';
.position-container{
			@include _display(flex);
			.position-container-lt{
				width: 50%;
				box-sizing: border-box;
				padding-right: 34px;
				border-right: 1px solid #eaeaea;
				min-height: 300px;
				.add-position{
					margin: 0;
					border: 1px solid #eaeaea;
					text-align: center;
					box-sizing: border-box;
					padding:10px;
					&:hover{
						border: 1px solid #FF551A;
						color: #FF551A;
						cursor: pointer;
					}
				}
				.add-position-active{
					border: 1px solid #FF551A;
					color: #FF551A;
					cursor: pointer;
				}
				.position-list{
					margin: 0;
					padding: 0;
					.position-item{
						list-style: none;
						@include _display(flex);
						@include _justify(space-between);
						@include _align(center);
						border-bottom: 1px solid #eaeaea;
						box-sizing: border-box;
						padding: 0 10px;
						.position-name{
							&:hover{
								cursor: pointer;
								color: #FF551A;
							}
						}
						.position-name-active{
							color: #FF551A;
						}
						.el-icon-delete{
							&:hover{
								cursor: pointer;
								color: #FF551A;
							}
						}
					}
				}
				.position-scorll{
					@include scrollBar();
					height: 200px;
					overflow-y: auto;
					overflow-x: hidden;
				}
				.el-pagination{
					text-align: center;
					margin-top: 30px;
					.el-pager li.active{
						color: #FF551A;
					}
					.el-pager li:hover {
						color: #FF551A;
					}
				}
			}

			.position-container-rt{
				flex: 1;
				box-sizing: border-box;
				padding-left: 34px;
				.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
					background-color: #FF551A;
					border-color: #FF551A;
				}
				.el-checkbox__input.is-checked+.el-checkbox__label {
					color: #FF551A;
				}
				.position-scorll{
					@include scrollBar();
					height: 200px;
					overflow-y: auto;
					overflow-x: hidden;
				}
				.staff-header{
					@include _display(flex);
					@include _align(center);
					margin-bottom: 20px;
					.staff-headImg{
						width: 40px;
						height: 40px;
						border-radius: 50%;
						margin-right: 10px;
					}
				}
				.staff-item{
					@include _display(flex);
					@include _align(center);
					margin-top: 14px;
					>p{
						margin: 0;
					}
					.staff-item-title{
						font-size: 16px;
						font-weight: bold;
						min-width: 80px;
					}
					.staff-item-text{
						color: #999999;
					}
					.staff-item-look{
						color: #c1c1c1;
						margin-left: 10px;
						font-size: 12px;
						line-height: 14px;
						&:hover{
							cursor: pointer;
							color: #ff551a;
						}
					}
				}
				.add-staff-btn{
					border: 1px solid #FF551A;
					background-color: #fff;
					display: block;
					margin: 30px auto;
						width: 100px;
						height: 40px;
						border-radius: 20px;
						color: #FF551A;
						&:hover{
							background-color: #FF551A;
							color: #FFFFFF;
						}
				}
				.position-btngroup{
					text-align: center;
					margin-top: 60px;
					>.el-button--primary{
						background-color: #fff;
						width: 100px;
						height: 40px;
						border-radius: 20px;
					}
					>.el-button--primary:nth-of-type(2){
						border: 1px solid #999999;
						color: #999999;
					}
					>.el-button--primary:nth-of-type(1){
						border: 1px solid #FF551A;
						color: #FF551A;
						&:hover{
							background-color: #FF551A;
							color: #FFFFFF;
						}
					}
				}
			}
		}

</style>